<template>
  <div class="block">
    <el-col class="row">
      <el-page-header @back="goBack" content="任务列表" title="返回"></el-page-header>
      <el-divider></el-divider>
      <el-col :span="24">
        <el-steps :active="step_active" simple>
          <el-step title="项目开题" icon="el-icon-edit" @click.native="step_click(0)" class="step_style"></el-step>
          <el-step title="中期检查" icon="el-icon-edit" @click.native="step_click(1)" class="step_style"></el-step>
          <el-step title="毕业论文" icon="el-icon-edit" @click.native="step_click(2)" class="step_style"></el-step>
        </el-steps>
        <div class="hr_div" :style="{marginLeft:+width_div+'%'}">
          <hr class="hr_s"/>
        </div>

      </el-col>
      <el-col v-loading="loading">
        <el-tabs v-model="activeName">
          <el-tab-pane name="0">
            <el-main style="padding: 0 20px;">
              <div v-for="(o,index) in data.filter(d => d.teacherReleaseTask.type=='项目开题')">
                <el-row class="a_margin_top">
                  <el-col :span="24">
                    <div class="count">{{index+1}}</div><!--序号-->
                    <el-card shadow="hover" style="background-color: rgba(240,244,247,0.49);">
                      <el-row class="H_V_center">
                        <!--右上角三角状态-->
                        <div class="state" style="background-color: #E6A23C;z-index: 998"
                             v-if="compareTime(o.teacherReleaseTask.stopDate)">已结束
                        </div>
                        <div class="state" v-if="o.stuTaskStatus==null">未作</div>
                        <div class="state" style="background-color: #409EFF"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='1'">提交
                        </div>
                        <div class="state" style="background-color: #F56C6C"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='2'">退回
                        </div>
                        <div class="state" style="background-color: #67C23A;z-index: 999"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='3'">通过
                        </div>
                        <el-col :span="19" style="margin: -10px 0px;">
                          <div class="margin_top">
                            <span class="title_style">提交内容：{{o.teacherReleaseTask.content}}</span>
                          </div>
                          <div class="margin_top">
                            <span class="left_stl">要求：</span>
                            <span class="comment_style">{{o.teacherReleaseTask.ask}}</span>
                          </div>
                          <div class="margin_top">
                            <span class="left_stl">发布时间：</span>
                            <span class="time_style">{{o.teacherReleaseTask.releaseDate}}</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="left_stl">结束时间：</span>
                            <span class="time_style">{{o.teacherReleaseTask.stopDate}}</span>
                          </div>
                        </el-col>
                        <el-col :span="5">
                          <el-button type="primary" icon="el-icon-view" @click="view(o,1)">查看</el-button>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              <el-row>
                <el-col :span="24" class="H_V_center" style="color: #8c939d;margin-top: 20px">
                  没有更多数据了
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane name="1">
            <el-main style="padding: 0 20px;">
              <div v-for="(o,index) in data.filter(d => d.teacherReleaseTask.type=='中期检查')">
                <el-row class="a_margin_top">
                  <el-col :span="24">
                    <div class="count">{{index+1}}</div><!--序号-->
                    <el-card shadow="hover" style="background-color: rgba(240,244,247,0.49);">
                      <el-row class="H_V_center">
                        <!--右上角三角状态-->
                        <div class="state" style="background-color: #E6A23C;z-index: 998"
                             v-if="compareTime(o.teacherReleaseTask.stopDate)">已结束
                        </div>
                        <div class="state" v-if="o.stuTaskStatus==null">未作</div>
                        <div class="state" style="background-color: #409EFF"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='1'">提交
                        </div>
                        <div class="state" style="background-color: #F56C6C"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='2'">退回
                        </div>
                        <div class="state" style="background-color: #67C23A;z-index: 999"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='3'">通过
                        </div>
                        <el-col :span="19" style="margin: -10px 0px;">
                          <div class="margin_top">
                            <span class="title_style">提交内容：{{o.teacherReleaseTask.content}}</span>
                          </div>
                          <div class="margin_top">
                            <span class="left_stl">要求：</span>
                            <span class="comment_style">{{o.teacherReleaseTask.ask}}</span>
                          </div>
                          <div class="margin_top">
                            <span class="left_stl">发布时间：</span>
                            <span class="time_style">{{o.teacherReleaseTask.releaseDate}}</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="left_stl">结束时间：</span>
                            <span class="time_style">{{o.teacherReleaseTask.stopDate}}</span>
                          </div>
                        </el-col>
                        <el-col :span="5">
                          <el-button type="primary" icon="el-icon-view" @click="view(o,1)">查看</el-button>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              <el-row>
                <el-col :span="24" class="H_V_center" style="color: #8c939d;margin-top: 20px">
                  没有更多数据了
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane name="2">
            <el-main style="padding: 0 20px;">
              <div v-for="(o,index) in data.filter(d => d.teacherReleaseTask.type=='毕业论文')">
                <el-row class="a_margin_top">
                  <el-col :span="24">
                    <div class="count">{{index+1}}</div><!--序号-->
                    <el-card shadow="hover" style="background-color: rgba(240,244,247,0.49);">
                      <el-row class="H_V_center">
                        <!--右上角三角状态-->
                        <div class="state" style="background-color: #E6A23C;z-index: 998"
                             v-if="compareTime(o.teacherReleaseTask.stopDate)">已结束
                        </div>
                        <div class="state" v-if="o.stuTaskStatus==null">未作</div>
                        <div class="state" style="background-color: #409EFF"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='1'">提交
                        </div>
                        <div class="state" style="background-color: #F56C6C"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='2'">退回
                        </div>
                        <div class="state" style="background-color: #67C23A;z-index: 999"
                             v-if="o.stuTaskStatus!=null&&o.stuTaskStatus.status=='3'">通过
                        </div>
                        <el-col :span="19" style="margin: -10px 0px;">
                          <div class="margin_top">
                            <span class="title_style">提交内容：{{o.teacherReleaseTask.content}}</span>
                          </div>
                          <div class="margin_top">
                            <span class="left_stl">要求：</span>
                            <span class="comment_style">{{o.teacherReleaseTask.ask}}</span>
                          </div>
                          <div class="margin_top">
                            <span class="left_stl">发布时间：</span>
                            <span class="time_style">{{o.teacherReleaseTask.releaseDate}}</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="left_stl">结束时间：</span>
                            <span class="time_style">{{o.teacherReleaseTask.stopDate}}</span>
                          </div>
                        </el-col>
                        <el-col :span="5">
                          <el-button type="primary" icon="el-icon-view" @click="view(o,1)">查看</el-button>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              <el-row>
                <el-col :span="24" class="H_V_center" style="color: #8c939d;margin-top: 20px">
                  没有更多数据了
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
        </el-tabs>
      </el-col>

    </el-col>
  </div>
</template>
<script>


    export default {


        data() {
            return {
                userinfo: this.UserInfo.getUserInfo(),
                width_div: 0,
                step_active: 3,//改这个
                activeName: '0',
                flag: 38,
                data: [],
                loading: false,
                outTime: true,
            }
        },
        methods: {
            looktask() {
                this.$router.push({
                    path: '/student/index/thesis?itemid=second', query: {id: 1}
                })
            },
            goBack() {
                console.log('go back');
                this.$router.go(-1);//返回上一层
            },
            step_click(e) {
                console.log(e);
                if (e <= this.step_active) {
                    this.activeName = e + ""
                    this.width_div = this.flag * e;
                }
            },
            view(o, index) {
                // this.$router.push({name: 'Viewtasks', params: {}});
                this.$router.push({
                    path: '/student/graduationproject/viewtasks',
                    query: {
                        // id: o,
                        id: encodeURIComponent(JSON.stringify(o)),
                        index: index,
                    }
                })
            },
            selData() {
                //studentSelection/stuSelTopic
                var self = this;
                self.loading = true;
                var body = {
                    topicId: self.$route.query.id,
                    stuId: self.userinfo.id,
                }
                self.$http.post(self.URL.api + 'studentSelection/stuSelTopicByTopicId', self.qs.stringify(body))
                    .then(function (response) {
                        console.log(response.data)
                        if (response.data.flag) {
                            self.data = response.data.data;
                            var t1 = false;
                            var t2 = false;
                            var t3 = false;
                            self.data.forEach(re => {
                                if (re.teacherReleaseTask.type == "项目开题") t1 = true
                                if (re.teacherReleaseTask.type == "中期检查") t2 = true
                                if (re.teacherReleaseTask.type == "毕业论文") t3 = true;
                            });
                            if (t1) self.step_active = 0;
                            if (t2) self.step_active = 1;
                            if (t3) self.step_active = 2;
                            self.loading = false;
                        } else {
                            self.loading = false;
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                        self.loading = false;
                    });
            },
            compareTime(str){
                console.log(str);
                var d1=new Date(str).valueOf();
                var d2=new Date().valueOf();
                return d2>d1;
            },
        },
        mounted() {

            this.step_active = 0;
            this.selData();
            console.log(this.$route.query.id)
        },
    }
</script>
<style scoped>


  .row >>> .el-tabs__item {
    height: 0px;
  }

  .row >>> .el-step__title:hover {
    color: #1267A7;
    border-color: red;
  }

  .row >>> .el-step__title {
    cursor: pointer;
  }

  .row >>> .el-tabs__header {
    margin: 0;
  }

  .row >>> .el-tabs__nav-wrap::after {
    height: 0;
  }

  .row >>> .el-steps--simple {
    /*border-bottom: 1px solid red;*/
  }

  .hr_div {
    width: 25%;
    transform: translateX(0%);
    display: flex;
    justify-content: center; /* 水平居中 */
  }

  .hr_s {
    height: 3px;
    background-color: #67C23A;
    border: 0px;
    width: 50%;
  }

  .a_margin_top {
    /*margin-top: 20px;*/
    /*overflow: hidden;*/
    padding-top: 30px;
  }

  .el-card__body {
    padding: 0px !important;
  }

  .H_V_center {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-left: 20px;
  }

  /*右上角状态*/
  .state {
    display: block;
    position: absolute;
    right: -18px;
    top: -60px;
    background: #c7c7c7;
    width: 140px;
    padding-top: 40px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);
    -webkit-transform-origin: 77px 115px;
    -ms-transform-origin: 77px 115px;
    transform-origin: 77px 115px;
    z-index: 1;
  }

  /*角标标题样式*/
  .count {
    position: absolute;
    top: 16px;
    left: -13px;
    background-color: #409EFF;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    height: 26px;
    width: 26px;
    line-height: 26px;
    /*padding: 0 6px;*/
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ffffff;
    z-index: 999;
  }

  /*标题样式*/
  .title_style {
    font-size: 1.25em;
    font-weight: 600;
    color: rgb(98, 113, 123);
  }

  /*时间样式*/
  .time_style {
    font-size: 14px;
    font-weight: 600;
    color: rgb(98, 113, 123);
  }

  /*时间文字样式*/
  .left_stl {
    font-size: 14px;
    color: rgb(98, 113, 123);
  }

  /*备注样式*/
  .comment_style {
    font-size: 14px;
    font-weight: 100;
    color: rgb(98, 113, 123);
  }

  /*文字上边距*/
  .margin_top {
    margin: 10px 0;
  }

  .el-loading-spinner {
    top: 40% !important;
  }


</style>

